import React, { FC, useState, useEffect, MutableRefObject, useRef } from 'react'
import { Toast } from 'antd-mobile'
import { history, connect } from 'umi';
import { GetSendnumber, GetPhoneNumber } from '@/api'
import ImageView from '@/components/BaseComponent/ImageView'
import '@/assets/RegisterHome/index.less'

type Event = 'register' | 'changemobile' | 'changemobile';

/**
 * userInfo:
avatar: "https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKCaoliborSHPs0laMKEKljaicS6Mvf1oAics920nyuVwPRCFLwNR9VhlzPD0pCNUDvQGVrALr6I2UtQ/132"
id: 3
nickname: "devin"
openid: "o5kTA0vQVX8wFX-iJjhdxhta0fU4"
token: "gi6qzPn1hSue"
url: "/u/3"
 */
interface SendCodeParamsProps {
  phone: string,
  event: Event,
  onClick(): void
}
const RegisterHome: FC<any> = (props) => {
   const { home: { userInfo } } = props;  
   console.log('props: ', props)

  // const [phone, setPhone] = useState('')
  const phoneVal: any = useRef('')
  const phoneCodeVal: any = useRef('')
  // 发送验证码接口
  const sendCode = async () => {
    const number = phoneVal.current.value;
    const code = phoneCodeVal.current.value;
    // 获取手机号 验证手机号
    if(!(/^1[0-9]{10}$/.test(number))){ 
      Toast.fail('手机号码有误，请重填', 2);
      return false;
    } else {
      const phoneCode = await GetSendnumber({mobile: number, event: 'register'})
      console.log('phoneCode:', phoneCode)
      Toast.success((phoneCode as any).msg, 1);
    }
  }

  const bindPhoneNumberEvent = async () => {
    const number = phoneVal.current.value;
    const code = phoneCodeVal.current.value;
    if (number && code) {
      const phoneRegister = await GetPhoneNumber({mobile: number, code})
      if ((phoneRegister as any).code === 1) {
        Toast.success('绑定手机号成功', 1);
        history.push('/person')
      }
      console.log('phoneRegister: ', phoneRegister)
    } else {
      Toast.fail('请输入验证码', 1);
    }
  }

  // const onPhoneChange = (e: any) => {
  //   setPhone(() => e.value)
  // }

  return (
    <div className='auth_Login'>
      <div className='auth_Login_Headportrait'>
        <div className='auth_Login_Headportrait_img'>
          <div >
            <img src={userInfo.avatar} alt="" />
          </div>
          <span>{userInfo.nickname || '默认'}</span>
        </div>
      </div>
      <div className='auth_Login_Headportrait_form'>
        <p className='passname'>
          账号<input type="text" ref={phoneVal} placeholder='请输入手机号' />
        </p>
        <p className='password'>
          验证码<input type="text" ref={phoneCodeVal} placeholder='请输入验证码' />
          <span onClick={sendCode}>发送验证码</span>
        </p>
      </div>
      <div className='auth_Login_Headportrait_btn'>
        <button onClick={bindPhoneNumberEvent}>绑定手机号</button>
      </div>
      <div className='auth_Login_Headportrait_auth'>
          
      </div>
    </div>
  )
}

export default connect(state => {
  return { ...state }
})(RegisterHome)


  // useEffect(() => {
    // const { query: { code, state } } = history.location
    // console.log('history:', code)
    // console.log('res:', window.location.origin)
    // if(code){
      // Axios.get('/api/index/wachatLogin', {
      //   params: {
      //     code,
      //     state
      //   }
      // }).then(res => {
      //   setToken(res.data.token)
      // })
    // }else {
      // Axios.get('/api/index/isLogin').then(res => {
      //   if ((res as any).data.code === 0) {
      //     // setTimeout(()=> {
      //       window.location.replace(`/api/user/wachatLogin?
      //       redirectUrl=${window.location.hostname}/login`)
      //     // },6000)
      //     // 第一步，做授权
      //   } else {
      //     setToken(res.data.data.token)
      //     console.log('q:', res.data.data)
      //   }
      // })
  //   }
  // }, [])
